<template>
      <div class="groupProject">
         <div class="gp-top">
            <div class="top-title">
                <div class="t-flag"></div>
                <div class="t-text">查询</div>
            </div>
            <div class="top-search">
               <div class="s-box">
                 <div class="b-account">
                    <span class="a-title">账号:</span>
                    <input placeholder="请输入账号" type="text" maxlength="11" v-model="account"></input>
                    <el-button class="a-search" @click="handleSearch()">搜索</el-button>
                    <el-button class="a-export" @click="handleExport()">导出</el-button>
                 </div>
               </div>
            </div>
         </div>
         <div class="gp-bottom">
           <div class="show-box">
             <div class="bottom-title">
               <div class="t-flag"></div>
               <div class="t-text">实时业绩</div>
               <div class="t-state">
                 <div class="t-s-title">当前状态:</div>
                 <div class="t-s-btn" v-if="isCut===2" @click="handleIsCut(1)">拦截</div>
                 <div class="t-s-btn" v-if="isCut===1" @click="handleIsCut(2)">不拦截</div>
               </div>
             </div>
             <div class="bottom-content-real">
               <div class="content-box" v-if="yejiList.length!==0" v-for="(item,index) in yejiList" :key="index" @click="handleSearch(item.mobile)">
                 <div class="item-name">{{item.name}}</div>
                 <div class="item-money">￥{{item.total_money}}</div>
               </div>
               <div class="no-data" v-if="yejiList.length===0">
                   暂无数据
               </div>
             </div>
           </div>
         </div>
      </div>
</template>

<script>
    export default {
        name: "GroupProject",
        data(){
          return{
            account:'',
            yejiList:[],
            isCut:1
          }
        },
        mounted() {
          this.handleGetGroupList()
          this.$api.GetOriginList()
        },
        methods:{
          //搜索人物
          handleSearch(mobile){
             let account=''
             if(mobile){
                account=mobile
             }else{
                if(this.account && this.account.length==11){
                  account=this.account
                }else{
                  this.$message.error("请输入正确的账号")
                  return
                }
             }
             if(account){
               this.$router.push({path:'/menus/group-queryPerson',query:{account:account}})
             }
          },
          handleGetGroupList(){
            const loading =this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let data={
              type:1
            }
            this.$api.GroupYejiList(data).then((res)=>{
                 this.yejiList=res.data.list
                 loading.close()
            },(res)=>{
                this.$message.error(res.msg)
            })
            setTimeout(()=>{
              loading.close()
            },10000)
          },
          //是否拦截
          handleIsCut(cutType){
            this.isCut=cutType
            const loading =this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            let data={
              type:this.isCut,
            }
            this.$api.GroupYejiList(data).then((res)=>{
              this.yejiList=res.data.list
              loading.close()
            },(res)=>{
              this.$message.error(res.msg)
            })
            setTimeout(()=>{
              loading.close()
            },10000)
          },
          //导出到excel
          handleExport(){
            let url=process.env.API_HOST+"/index.php/dataofuser/getTotalList?type="+this.isCut+"&to_excel=1"
            const a=document.createElement("a")
            a.setAttribute("download","");
            a.setAttribute("href",url)
            a.click()
          }
        }
    }
</script>

<style scoped lang="less">
    .groupProject{
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      overflow: auto;
      .gp-top{
        width: 100%;
        background-color: #ffffff;
        .top-title{
          height: 50px;
          display: flex;
          align-items: center;
          padding-left: 30px;
          box-sizing: border-box;
          border-bottom: solid 1px #EEEEEE;
          .t-flag{
            width: 3px;
            height: 15px;
            background-color: #2A4BF0;
          }
          .t-text{
            padding-left: 10px;
            font-size: 16px;
            color: #323232;
          }

        }
        .top-search{
          box-sizing: border-box;
          padding: 20px 40px 20px 40px;
          .s-box{
            width: 100%;
            background-color: #F8F8F8;
            .b-account{
              text-align: left;
              position: relative;
              padding: 7px 10px;
              border-radius: 5px;
              box-sizing: border-box;
              .a-title{
                font-size: 14px;
                color: #323232;
              }
              input{
                width: 200px;
                height: 30px;
                font-size: 14px;
                padding: 5px 10px;
                box-sizing: border-box;
                border: solid 1px #DFE2E7;
                border-radius: 3px;
              }
              .a-search{
                margin-left: 20px;
                width: 80px;
                height: 30px;
                padding: 0;
                line-height: 30px;
              }
              .a-export{
                position: absolute;
                right: 20px;
                width: 80px;
                height: 30px;
                padding: 0;
                line-height: 30px;
              }
            }
          }
        }
      }
      .gp-bottom{
        /*height: 100%;*/
        margin-top: 10px;
        background-color: #ffffff;
        .show-box{
          .bottom-title{
            height: 50px;
            display: flex;
            align-items: center;
            padding-left: 30px;
            box-sizing: border-box;
            position: relative;
            .t-flag{
              width: 3px;
              height: 15px;
              background-color: #2A4BF0;
            }
            .t-text{
              padding-left: 10px;
              font-size: 16px;
              color: #323232;
            }
            .t-state{
              position: absolute;
              right: 80px;
              top: 50%;
              transform: translate(0,-50%);
              .t-s-title{
                display: inline-block;
              }
              .t-s-btn{
                display: inline-block;
                border: solid 1px red;
                padding: 2px 10px;
                color: red;
                cursor: pointer;
              }
            }
          }
          .title{
            text-align: left;
            padding-left: 43px;
          }
          .money{
            text-align: right;
            font-weight: bold;
            font-size: 15px;
            color: #EA2910;
            padding-right: 50px;
          }
          .bottom-content-real{
            padding: 20px 40px 40px 30px;
            display: flex;
            flex-wrap: wrap;
            .content-box{
              cursor: pointer;
              width: 120px;
              height: 160px;
              position: relative;
              background-color: #95A1FD;
              border-radius: 5px;
              margin: 10px 20px;
              color:#ffffff;
              .item-name{
                position: absolute;
                left: 50%;
                font-size: 15px;
                top:10px;
                transform: translate(-50%,0);
              }
              .item-money{
                position: absolute;
                left: 50%;
                font-size: 15px;
                top:88px;
                z-index: 10;
                transform: translate(-50%,0);
              }
            }
            .no-data{
              width: 100%;
              text-align: center;
            }
            .content-box::after{
              content: '';
              width: 100px;
              height: 100px;
              position: absolute;
              left: 50%;
              transform: translate(-50%,50px);
              border-radius: 50px;
              background-color: #8F9CFF;
            }
          }
        }

      }
    }
</style>
